<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>layer</title>
    <link rel="stylesheet" href="../lib/layui-v2.5.7/layui/css/layui.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }

        .self .layui-layer-title {
            background-color: #f00;
        }

        .self a.layui-layer-btn0 {
            background-color: #f00;
            border-color: #f00;
        }

        p {
            width: 200px;
            margin: 500px;
        }
    </style>
</head>
<body>

    <p class="text">hello world</p>
    
    <script src="../lib/layui-v2.5.7/layui/layui.all.js"></script>
    <script type="text/javascript">
        // var layer = layui.layer;
        // 作为一个独立模块，layer可以不带 layui 前缀使用
        // console.log(layer);
        // 添加默认配置，后面打开的所有弹窗都具有此配置，同属性覆盖
        layer.config({
            time: 4000
        })
        /* layer.open({
            // type: 0,
            title: ["标题", "color: #fff"],
            content: "hello world",
            skin: "self", // 风格，layui-layer-lan/molv 自定义(自己添加盒子类名，更改子元素样式)
            // area: "500px" 定义宽度  ["300px", "200px"] 定义宽高
            // offset: "t/b/l/r/ lt/lb/rt/rb"   "500px" 上边距  ["200px", "50px"] 上左边距
            // icon: 信息层 0-6   加载层 0-2
            btn: ["好的", "不要", "猜一猜"], // 定义按钮信息  one -> "确认信息"  more -> ["one", "two", ...] 第一个按钮的点击回调函数是 yes，其它的按钮就是btn2...
            // 每一个按钮的回调，都有参数，第一个参数是当前弹窗的返回值。除yes以外其它的按钮回调默认会关闭弹窗，如果不希望关闭，可以在函数中返回false
            // layer.close(弹窗的返回值)  关闭弹窗 
            yes(index){
                console.log(index);
                layer.close(index);
            },
            btn2(index){
                console.log(index);
                return false;
            },
            btn3(){
                console.log("btn3点击了");
            },
            btnAlign: "c", // 按钮的排列顺序  l c r(default)
            shade: [0.5, '#393D49'], // 定义遮罩层  false不显示
            shadeClose: true, // 能否通过点击遮罩层关闭弹窗
            time: 2000, // 自动关闭的时间
            // move: ".layui-layer-content" // 触发拖动的元素，也可以设置为 false 来阻止拖动
            cancel(){
                console.log("右上角的关闭按钮的回调函数");
            }
        }) */

        // 快捷弹窗  普通信息窗   layer.alert("内容", 配置, yes函数)
        // layer.alert("普通信息窗", { icon: 2 }, function (index){
        //     console.log(index);
        //     layer.close(index);
        // });

        // layer.confirm("内容", {配置}, 确认的按钮, 其它按钮的回调....)
        // layer.confirm("你喜欢吃苹果吗?", { icon: 3, btn: ["喜欢", "不喜欢"] }, function (index){
        //     layer.close(index);
        //     layer.alert("太好了，我也喜欢");
        // }, function (){
        //     layer.alert("太好了，我也不喜欢");
        // })


        // layer.msg(内容, 配置, 结束回调)
        // layer.msg("提示窗", { icon: 1 });

        // layer.load(load的图标样式0-2, 配置)
        layer.load(1, { time: 2000, shade: [.5, "#333"] });
    </script>
</body>
</html>